<template>
  <div
    class="product-detail"
    v-loading="loading">
    <el-card
      class="aui-card--fill"
      shadow="never">
      <div class="basic-info row">
        <midea-admin-image
          :height="80"
          :origin-size="true"
          :url="product.productImage"
          :width="80"
        />

        <div class="info-content">
          <h4>
            <span>产品名称：</span>
            <span>{{ product.productName }}</span>
          </h4>
          <p>
            <span>产品型号码：</span>
            <span>{{ product.productCode }}</span>
          </p>
          <p>
            <span>产品版本号：</span>
            <span>{{ product.productCode }}</span>
          </p>
        </div>
      </div>
    </el-card>

    <!--      Tabs with version and modules information、-->

    <el-card
      class="aui-card--fill"
      shadow="never">
      <el-tabs
        @tab-click="handleTabClick"
        v-model="activeTab">
        <el-tab-pane
          label="产品信息"
          name="info">
          <!--:rules="dataRule"-->
          <el-form
            :model="form"
            label-position="right"
            label-width="100px"
            ref="dataForm"
          >
            <el-form-item
              :label="$t('product.img')"
              prop="productUrlId">
              <el-upload
                :action="imgUploadPath"
                :file-list="imgFiles"
                :headers="imgUploadHeaders"
                :limit="1"
                :multiple="false"
                :on-exceed="handleImgFileExceed"
                :on-remove="onImgRemoved"
                :on-success="onImgUploadSuccess"
                accept="image/png, image/jpeg"
                list-type="picture-card"
                with-credentials
              >
                <i class="el-icon-plus"/>
              </el-upload>
            </el-form-item>

            <el-form-item
              :label="$t('product.hardwarePlatform')"
              prop="productTypeId"
            >
              <el-select
                :placeholder="$t('product.hardwarePlatform')"
                clearable
                filterable
                v-model="form.hardwarePlatformId"
              >
                <el-option
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                  v-for="item in hardwarePlatforms"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('product.template')"
              prop="productTempId">
              <el-select
                :placeholder="$t('product.template')"
                clearable
                filterable
                v-model="form.productTempId"
              >
                <el-option
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                  v-for="item in productTemplates"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('product.luaProtocolVersion')"
              prop="luaProtocolVersionId"
            >
              <el-select
                :placeholder="$t('product.luaProtocolVersion')"
                clearable
                filterable
                v-model="form.luaProtocolVersionId"
              >
                <el-option
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                  v-for="item in luaProtocolVersions"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              :label="$t('product.electronicProtocolVersion')"
              prop="electronicVersionId"
            >
              <el-select
                :placeholder="$t('product.electronicProtocolVersion')"
                clearable
                filterable
                v-model="form.electronicVersionId"
              >
                <el-option
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                  v-for="item in electVersions"
                />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                @click="submit()"
                size="large"
                type="primary">
                保存
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          label="模式功能"
          name="function">模式功能</el-tab-pane>
        <el-tab-pane
          label="云菜谱"
          name="recipe">云菜谱</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// import mixinViewModule from '@/mixins/view-module'

import ProductMixins from '@/mixins/product/product.mixins'
import Product from '../../../model/Product'

export default {
  name: 'ProductionDetail',
  mixins: [ProductMixins],
  data () {
    return {
      activeTab: 'info',
      loading: false,
      productId: '',
      product: {}

      // mixinViewModuleOptions: {
      //   // getDataListURL: '/product/pproductinfo/info',
      //   getDataListIsPage: true
      //   // exportURL: '/sys/log/login/export'
      // },
      // dataForm: {
      //   creatorName: '',
      //   status: ''
      // }
    }
  },
  beforeMount () {
    // this.productId = this.$route.params.id
    Promise.all([
      this.getElectronicVersions(),
      this.getProductTypes(),
      this.getLuaProtocolVersions(),
      this.getProductTemplates(),
      this.getHardwarePlatForms(),
      this.getIOTModules()
    ]).then(() => {
      // this.loadData()
    })
  },
  mounted () {
    this.loading = true

    // this.getDataList()
  },
  watch: {
    '$route.params': {
      handler: function (newValue, oldValue) {
        if (!newValue && !oldValue) {
          return
        }
        if (this.$route.name !== 'product-detail') {
          // not in this page
          return
        }
        this.productId = this.$route.params.id
        this.loadData()
      },
      immediate: true
    }
  },
  methods: {
    handleTabClick (tab, event) {
      this.activeTab = tab.name
    },
    handleSubmitSuccess () {
      // reload
      this.$message({
        message: this.$t('prompt.success'),
        type: 'success',
        duration: 500,
        onClose: () => {
          this.loadData()
        }
      })

      // this.$router.back()
    },

    loadData () {
      if (!this.productId || this.productId.length <= 0) {
        return
      }
      this.product = {}
      this.$http
        .get(`/product/pproductinfo/${this.productId}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }

          // get product image by model product Url id
          this.product = new Product(res.data)
          this.form = {
            ...res.data
          }
          return this.$http.get(
            `/product/pproductimageurl/${res.data.productUrlId}`
          )
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          let { ip, port, url } = res.data
          this.product.setProductImageInfo(ip, port, url)
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.product-detail {
  .basic-info {
    display: flex;
    flex-direction: row;

    .info-content {
      margin-left: 15px;

      h4 {
        margin: 0;
      }

      p {
        color: #666666;
        font-size: 14px;
        margin: 10px 0 10px 0;
        font-weight: 300;
      }
    }
  }
}
</style>
